<template>
  <div class="message">
    <div class="table-box">
      <div class="table-box explain">
        <alert message="使用说明" type="info" style="margin-bottom: 10px">
          <template #description>
            <span
              >未设置按照系统默认生成，系统默认：大图800 * 800px，中图300 * 300px，小图150 *
              150px</span
            ><br />
            <span> 水印只在上传图片时生成，原图，大中小缩略图上都按照比例存在。 </span><br />
            <span> 若上传图片时未开启水印，则该图在开启水印之后依旧无水印效果。 </span>
          </template>
        </alert>
      </div>

      <div class="table-box">
        <a-card :bordered="false" :padding="0" dis-hover>
          <a-form
            ref="formValidate"
            :model="formData"
            :rules="rules"
            :labelCol="{ style: { width: '123px' } }"
          >
            <a-form-item label="存储类型" :labelCol="{ style: { width: '90px' } }">
              <a-radio-group v-model:value="formData.upload_type" @change="changeSave">
                <a-radio value="1">本地存储</a-radio>
                <a-radio value="2">七牛云存储</a-radio>
                <a-radio value="3">阿里云存储</a-radio>
                <a-radio value="4">腾讯云存储</a-radio>
                <a-radio value="5">京东云存储</a-radio>
                <a-radio value="6">华为云存储</a-radio>
                <a-radio value="7">天翼云存储</a-radio>
              </a-radio-group>
            </a-form-item>
            <div>缩略图设置</div>
            <div class="thumb-list">
              <div class="item">
                <div class="image">
                  <img src="@/assets/images/thumb1.png" />
                  <div>缩略大图</div>
                </div>
                <div>
                  <a-form-item
                    name="thumb_big_width"
                    label="宽"
                    :labelCol="{ style: { width: '63px' } }"
                  >
                    <a-input
                      v-model:value="formData.thumb_big_width"
                      placeholder="请输入宽"
                      addon-after="px"
                    />
                  </a-form-item>
                  <a-form-item
                    name="thumb_big_height"
                    label="高"
                    :labelCol="{ style: { width: '63px' } }"
                  >
                    <a-input
                      v-model:value="formData.thumb_big_height"
                      placeholder="请输入高"
                      addon-after="px"
                    />
                  </a-form-item>
                </div>
              </div>
              <div class="item">
                <div class="image">
                  <img src="@/assets/images/thumb2.png" />
                  <div>缩略中图</div>
                </div>
                <div>
                  <a-form-item
                    name="thumb_mid_width"
                    label="宽"
                    :labelCol="{ style: { width: '63px' } }"
                  >
                    <a-input
                      v-model:value="formData.thumb_mid_width"
                      placeholder="请输入宽"
                      addon-after="px"
                    />
                  </a-form-item>
                  <a-form-item
                    name="thumb_mid_height"
                    label="高"
                    :labelCol="{ style: { width: '63px' } }"
                  >
                    <a-input
                      v-model:value="formData.thumb_mid_height"
                      placeholder="请输入高"
                      addon-after="px"
                    />
                  </a-form-item>
                </div>
              </div>
              <div class="item">
                <div class="image">
                  <img src="@/assets/images/thumb2.png" />
                  <div>缩略小图</div>
                </div>
                <div>
                  <a-form-item
                    name="thumb_small_width"
                    label="宽"
                    :labelCol="{ style: { width: '63px' } }"
                  >
                    <a-input
                      v-model:value="formData.thumb_small_width"
                      placeholder="请输入宽"
                      addon-after="px"
                    />
                  </a-form-item>
                  <a-form-item
                    name="thumb_small_height"
                    label="高"
                    :labelCol="{ style: { width: '63px' } }"
                  >
                    <a-input
                      v-model:value="formData.thumb_small_height"
                      placeholder="请输入高"
                      addon-after="px"
                    />
                  </a-form-item>
                </div>
              </div>
            </div>
            <a-form-item label="是否开启水印：">
              <a-switch
                v-model:checked="formData.image_watermark_status"
                checked-children="开"
                un-checked-children="关"
                checkedValue="1"
              />
            </a-form-item>
            <a-form-item v-show="formData.image_watermark_status == '1'" label="水印类型">
              <a-radio-group v-model:value="formData.watermark_type">
                <a-radio value="1">图片</a-radio>
                <a-radio value="2">文字</a-radio>
              </a-radio-group>
            </a-form-item>

            <div v-show="formData.image_watermark_status == '1'" class="form-item-list">
              <a-form-item
                v-if="formData.watermark_type === '1'"
                key="watermark_image"
                label="水印图片："
              >
                <div class="upload-list">
                  <ImageUpload
                    v-model:value="formData.watermark_image"
                    :maxSize="5"
                    :maxNumber="1"
                    @change="handleChange"
                    :api="uploadApi"
                    :accept="['image/*']"
                  />
                </div>

                <div>
                  <a-popover
                    placement="bottom"
                    trigger="hover"
                    :overlayStyle="{ width: '256px' }"
                    transfer
                    padding="8px"
                  >
                    <a>查看示例</a>
                    <template #content>
                      <div class="exampleImg">
                        <div
                          style="
                            margin-bottom: 10px;
                            color: #666;
                            font-size: 12px;
                            line-height: 18px;
                          "
                          >可在商品图上增加水印，水印可选择多<br />种样式，下图仅供参考</div
                        >
                        <img :src="`//app.in/res/images/watermark.png`" alt="" />
                      </div>
                    </template>
                  </a-popover>
                </div>
              </a-form-item>

              <a-form-item
                v-if="formData.watermark_type === '2'"
                key="watermark_text"
                label="水印文字"
              >
                <a-input v-model:value="formData.watermark_text" placeholder="请输入水印文字" />
              </a-form-item>
              <a-form-item
                v-if="formData.watermark_type === '2'"
                key="watermark_text_size"
                label="水印文字大小"
                name="watermark_text_size"
              >
                <a-input
                  v-model:value="formData.watermark_text_size"
                  placeholder="请输入水印文字大小"
                  addon-after="px"
                />
              </a-form-item>
              <a-form-item
                v-if="formData.watermark_type === '2'"
                key="watermark_text_color"
                label="水印字体颜色"
              >
                <!-- <ColorPicker v-model="formData.watermark_text_color" /> -->
                <a-input type="color" v-model:value="formData.watermark_text_color" />
              </a-form-item>

              <a-form-item label="水印位置">
                <a-radio-group
                  v-model:value="formData.watermark_position"
                  option-type="button"
                  buttonStyle="solid"
                >
                  <a-radio v-for="item in 9" :key="item" :value="item" />
                </a-radio-group>
                <span class="tip">{{ positionText }}</span>
              </a-form-item>

              <a-form-item
                v-if="formData.watermark_type === '1'"
                label="水印透明度"
                name="watermark_opacity"
              >
                <a-input
                  v-model:value="formData.watermark_opacity"
                  placeholder="请输入水印透明度"
                />
              </a-form-item>

              <a-form-item
                v-if="formData.watermark_type === '1'"
                label="水印倾斜度"
                name="watermark_rotate"
              >
                <a-input v-model:value="formData.watermark_rotate" placeholder="请输入水印倾斜度" />
              </a-form-item>

              <a-form-item
                v-if="formData.watermark_type === '2'"
                key="watermark_text_angle"
                label="水印字体旋转角度"
              >
                <a-input
                  v-model="formData.watermark_text_angle"
                  placeholder="请输入水印字体旋转角度"
                />
              </a-form-item>
              <a-form-item label="水印横坐标偏移量" name="watermark_x">
                <a-input
                  v-model:value="formData.watermark_x"
                  placeholder="请输入横坐标偏移量"
                  addon-after="px"
                />
              </a-form-item>
              <a-form-item label="水印纵坐标偏移量" name="watermark_y">
                <a-input
                  v-model:value="formData.watermark_y"
                  placeholder="请输入纵坐标偏移量"
                  addon-after="px"
                />
              </a-form-item>
            </div>

            <a-form-item :wrapper-col="{ span: 14, offset: 2 }">
              <a-button type="primary" @click="handleSubmit()">保存</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import {
    Alert,
    Button,
    RadioGroup,
    Radio,
    FormItem,
    Form,
    Card,
    Input,
    Switch,
    Popover,
  } from 'ant-design-vue';
  import { defineComponent, reactive, computed, onMounted, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { ImageUpload } from '@/components/Upload';
  import { getSettingImage, setSaveType, saveBasicsConfig } from '@/api/app/setting';
  import { uploadApi } from '@/api/sys/upload';
  import type { UnwrapRef } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';

  export default defineComponent({
    name: 'SettingConfigStorage',
    components: {
      AForm: Form,
      ACard: Card,
      Alert,
      ASwitch: Switch,
      AButton: Button,
      ARadioGroup: RadioGroup,
      ARadio: Radio,
      AFormItem: FormItem,
      AInput: Input,
      ImageUpload,
      APopover: Popover,
    },
    setup() {
      const formValidate = ref();
      const { createMessage: msg } = useMessage();

      interface FormData {
        upload_type: string;
        thumb_big_width: string;
        thumb_big_height: string;
        thumb_mid_width: string;
        thumb_mid_height: string;
        thumb_small_width: string;
        thumb_small_height: string;
        image_watermark_status: string;
        watermark_type: string;
        watermark_text: string;
        watermark_text_angle: string;
        watermark_text_color: string;
        watermark_text_size: string;
        watermark_position: number;
        watermark_image: string[];
        watermark_opacity: string;
        watermark_rotate: string;
        watermark_x: string;
        watermark_y: string;
      }

      const formData: UnwrapRef<FormData> = reactive({
        upload_type: '1',
        thumb_big_width: '',
        thumb_big_height: '',
        thumb_mid_width: '',
        thumb_mid_height: '',
        thumb_small_width: '',
        thumb_small_height: '',
        image_watermark_status: '1',
        watermark_type: '1',
        watermark_text: '',
        watermark_text_angle: '',
        watermark_text_color: '',
        watermark_text_size: '',
        watermark_position: 1,
        watermark_image: [],
        watermark_opacity: '',
        watermark_rotate: '',
        watermark_x: '',
        watermark_y: '',
      });

      onMounted(async () => {
        const data = await getSettingImage();
        formData.upload_type = data.upload_type.value;
        formData.thumb_big_width = data.thumb_big_width.value;
        formData.thumb_big_height = data.thumb_big_height.value;
        formData.thumb_mid_width = data.thumb_mid_width.value;
        formData.thumb_mid_height = data.thumb_mid_height.value;
        formData.thumb_small_width = data.thumb_small_width.value;
        formData.thumb_small_height = data.thumb_small_height.value;
        formData.image_watermark_status = data.image_watermark_status.value;
        formData.watermark_type = data.watermark_type.value;
        formData.watermark_text = data.watermark_text.value;
        formData.watermark_text_angle = data.watermark_text_angle.value;
        formData.watermark_text_color = data.watermark_text_color.value;
        formData.watermark_text_size = data.watermark_text_size.value;
        formData.watermark_position = data.watermark_position.value;
        formData.watermark_image = data.watermark_image.value;
        formData.watermark_opacity = data.watermark_opacity.value;
        formData.watermark_rotate = data.watermark_rotate.value;
        formData.watermark_x = data.watermark_x.value;
        formData.watermark_y = data.watermark_y.value;
      });

      async function changeSave(e) {
        setSaveType(e.target.value).then(() => {
          msg.success(`切换成功!`);
        });
      }

      const positionText = computed(() => {
        return ['左上', '中上', '右上', '左中', '中', '右中', '左下', '中下', '右下'][
          formData.watermark_position - 1
        ];
      });

      const rules: Record<string, Rule[]> = {
        watermark_text_size: [
          {
            pattern: new RegExp(/(^[1-9]\d*$)/),
            message: '必须为正整数',
            trigger: 'blur',
          },
        ],
        watermark_opacity: [
          {
            pattern: new RegExp(/^([0-9]{1,2}|100)$/),
            message: '必须为0-100的整数',
            trigger: 'blur',
          },
        ],
        watermark_rotate: [
          {
            pattern: new RegExp(/^([0-9]{1,2}|360)$/),
            message: '必须为0-360的整数',
            trigger: 'blur',
          },
        ],
      };

      async function handleChange(list) {
        formData.watermark_image = list;
      }

      async function handleSubmit() {
        formValidate.value
          .validate()
          .then(async () => {
            saveBasicsConfig(formData).then(() => {
              msg.success('保存成功');
            });
          })
          .catch((error) => {
            console.log('error', error);
          });
      }

      return {
        formData,
        formValidate,
        changeSave,
        rules,
        handleSubmit,
        uploadApi,
        positionText,
        handleChange,
      };
    },
  });
</script>
<style lang="less" scoped>
  .ant-input-group > .ant-input:last-child,
  /deep/.ant-input-group-append {
    background: none;
    color: #999;
  }

  /deep/.ant-input-group .ant-input {
    border-right: 0 !important;
  }

  .content /deep/.ant-form .ant-form-item-label {
    width: 133px;
  }

  .message /deep/ .ant-table-header thead tr th {
    padding: 8px 16px;
  }

  .message /deep/ .ant-tabs-tab {
    border-radius: 0 !important;
  }

  .table-box {
    /* padding: 20px; */
  }

  .exampleImg img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }

  .table-box.explain .ant-card {
    border-color: #d6e7fc;
    background-color: #eaf4fe;
  }

  .thumb-list {
    display: flex;
    margin-top: 20px;
    margin-bottom: 59px;

    .item {
      display: flex;
      flex: 0 0 calc((100% - 120px) / 3);
      align-items: center;
      margin-left: 60px;

      &:first-child {
        margin-left: 0;
      }
    }

    .image {
      padding: 0 5px;
      color: #000;
      font-size: 13px;
      line-height: 18px;
      text-align: center;
    }

    img {
      width: 84px;
      height: 67px;
      margin-bottom: 9px;
    }

    .ant-form-item {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .form-item-list {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% / 3 * 2);

    .ant-form-item {
      flex: 0 0 calc((100% - 60px) / 2);
      margin-left: 60px;

      &:nth-child(2n + 1) {
        margin-left: 0;
      }
    }

    .ant-radio-group {
      display: inline-flex;
      flex-wrap: wrap;
      width: 90px;
    }

    .ant-radio-button-wrapper {
      width: 30px;
      height: 30px;
      margin-right: 0;
      padding: 0;
      font-size: 0 !important;

      &:first-child {
        border-radius: 4px 0 0;
      }

      &:last-child {
        border-radius: 0 0 4px;
      }

      &:nth-child(3) {
        border-radius: 0 4px 0 0;
      }

      &:nth-child(7) {
        border-radius: 0 0 0 4px;
      }

      &::before {
        left: 0;
      }

      &::after {
        top: 0;
        left: 0;
      }
    }

    .ant-radio-wrapper-checked {
      background: rgb(24 144 255 / 10%);
    }
  }

  .tip {
    display: inline-block;
    margin-left: 6px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
    vertical-align: bottom;
  }

  .upload,
  .upload-list {
    display: inline-block;
    position: relative;
    // width: 60px;
    // height: 60px;
    // border: 1px solid #ddd;
    border-radius: 4px;
    // background-color: rgb(0 0 0 / 2%);
    // line-height: 60px;
    text-align: center;
    vertical-align: middle;

    img {
      width: 100%;
      height: 100%;
    }

    .ivu-icon {
      color: #898989;
    }
  }

  .upload-list-cover {
    display: none;
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 60%);
  }

  .upload-list:hover .upload-list-cover {
    display: block;
  }

  .upload-list-cover i {
    margin: 0 2px;
    color: #fff !important;
    font-size: 20px;
    cursor: pointer;
  }
</style>
